<template>
    <el-form>
        <el-form-item label="品牌名:" style="{width:100px}"><el-input placeholder="Please input"
                v-model="filterForm.keywords" /></el-form-item>
        <el-form-item label="价格区间:"><el-input-number :min="0" v-model="filterForm.minPrice" /> - <el-input-number :min="0"
                v-model="filterForm.maxPrice" /></el-form-item>
        <el-form-item label="生产日期:" style="{width:100px}">
            <el-date-picker type="daterange" v-model="filterForm.dateRange" range-separator="To"
                start-placeholder="Start date" end-placeholder="End date" />
        </el-form-item>
        <el-form-item label="类别筛选" >
            <el-cascader  
            v-model="filterForm.cId"
            :options = "categoryTree"
            :show-all-levels="false"
            :props="{label:'name',expandTrigger:'hover',value:'id',emitPath:false}"
            />
        </el-form-item>
        <el-button type="success" @click="show">筛选</el-button>
    </el-form>
</template>

<script setup>

import { useCategory } from '@/hooks/category';
import { defineEmits,reactive } from 'vue';
import dayjs from 'dayjs';


const {categoryTree} = useCategory();
console.log('类别筛选',categoryTree);


//传到父组件
const emits = defineEmits(['filtering'])

const filterForm = reactive({
        dateRange: '',
        minPrice: 0,
        maxPrice: 0,
        keywords: '',
        cId: ''
    });



function show() {
        //删除不需要的筛选条件
        for (var key in filterForm) {
            if (!filterForm[key]) {
                //删除对象的一个属性
                delete filterForm[key]
            }
        }

        //时间需要简单处理一下
        if (filterForm.dateRange) {
            const start = dayjs(filterForm.dateRange[0]).format('YYYY-MM-DD');
            const end = dayjs(filterForm.dateRange[1]).format('YYYY-MM-DD');
            delete filterForm.dateRange
            filterForm.start = start;
            filterForm.end = end;
        }
        emits('filtering', filterForm);
    }



</script>